<template>
  <div class="shopInfo" v-loading="loading">
    <el-form class="clearfix" :model="Form" :rules="rules" ref="form" label-width="130px">
        <el-col :xl="9" :lg="10" :md="12" :sm="24" :xs="24">
          <ul>
            <el-form-item class="btn-group" label="商户类型：">
              <el-button size="small" type="text" v-if="Form.commer_type === '01'">自然人</el-button>
              <el-button size="small" type="text" v-if="Form.commer_type === '02'">个体工商户</el-button>
              <el-button size="small" type="text" v-if="Form.commer_type === '03'">企业商户</el-button>
            </el-form-item>
            <el-form-item prop="commer_name" label="商户名称：">
              <el-input placeholder="输入商户名称" v-model="Form.commer_name"></el-input>
            </el-form-item>
            <el-form-item prop="alias" label="商户简称：">
              <el-input placeholder="输入商户名称" v-model="Form.alias"></el-input>
            </el-form-item>
            <!-- <el-form-item prop="commer_address" label="商户地址：">
              <el-cascader v-model="Form.commer_address" change-on-select  clearable :options="option" :props="props"></el-cascader>
            </el-form-item> -->
            <el-form-item prop="real_address" label="具体地址：">
              <el-input placeholder="商户具体地址" v-model="Form.real_address"></el-input>
            </el-form-item>
            <el-form-item prop="contact_name" label="联系人：">
              <el-input placeholder="联系人姓名" v-model="Form.contact_name"></el-input>
            </el-form-item>
            <el-form-item prop="contact_tel" label="联系电话：">
              <el-input placeholder="联系人电话号码" v-model.number="Form.contact_tel" :maxlength="11"></el-input>
            </el-form-item>
            <el-form-item prop="serverPhone" label="商户客服电话：">
              <el-input placeholder="商户客服电话号码" v-model="Form.serverPhone" :maxlength="11"></el-input>
            </el-form-item>
            <!-- <el-form-item prop="email" label="邮箱：">
              <el-input placeholder="邮箱" v-model="Form.email"></el-input>
            </el-form-item> -->
            <el-form-item prop="lead_name" label="负责人姓名：">
              <el-input placeholder="企业请写法人名称" v-model="Form.lead_name"></el-input>
            </el-form-item>
            <el-form-item prop="lead_identity_card" label="负责人身份证号码：">
              <el-input placeholder="身份证号码" v-model="Form.lead_identity_card" :maxlength="18"></el-input>
            </el-form-item>
            <el-form-item prop="lead_phone" label="负责人手机号：">
              <el-input placeholder="负责人手机号" disabled readonly v-model="Form.lead_phone" :maxlength="11"></el-input>
            </el-form-item>
            <el-form-item v-if="active1 !== 0" prop="business_license" label="营业执照号：">
              <el-input placeholder="营业执照工商注册号" v-model="Form.business_license"></el-input>
            </el-form-item>
            <el-form-item prop="commer_mcc" label="商户经营类型：">
              <el-select v-model="Form.commer_mcc">
                <el-option v-for="(item,index) in wsCategory" :key="index" :label="item.name" :value="item.category_id">{{ item.name }}</el-option>
              </el-select>
            </el-form-item>
<!--             
            <el-form-item label="支付宝名称：">
              <el-input placeholder="支付宝名称" v-model="Form.ali_nickname"></el-input>
            </el-form-item>
            <el-form-item label="支付宝账号：">
              <el-input placeholder="支付宝账号" v-model="Form.ali_account"></el-input>
            </el-form-item>
            <el-form-item label="信用代码：">
              <el-input placeholder="信用代码" v-model="Form.credit"></el-input>
            </el-form-item> -->
            <div class="pz">
              <h2>网商银行配置</h2>
              <el-form-item label="选择渠道：">
                <el-radio v-model="Form.ws_bank_config" :label="1"><span>T1</span>说明：提现到银行卡，次日到账</el-radio>
              </el-form-item>
              <div>
                <h2>支付通道配置：</h2>
                <div>
                  <el-form-item label="网商银行微信通道-签约价" label-width="170px">
                    <el-input size="mini" v-model.number="Form.ws_wx_rate" :maxlength="5" style="width:100px;"></el-input>%
                  </el-form-item>
                  <el-form-item label="网商银行支付宝通道-签约价" label-width="170px">
                    <el-input size="mini" v-model.number="Form.ws_ali_rate" :maxlength="5" style="width:100px;"></el-input>%
                  </el-form-item>
                </div>
              </div>
              <div class="wx" v-if="access === 0">
                <h2>微信公众号配置：</h2>
                <el-form-item prop="pay_id" label="支付微信公众号APPID" label-width="180px">
                  <el-input placeholder="APPID" v-model="Form.pay_id"></el-input>
                </el-form-item>
                <el-form-item prop="recommend" label="支付完成推荐关注公众号APPID" label-width="180px">
                  <el-input placeholder="APPID" v-model="Form.recommend"></el-input>
                </el-form-item>
              </div>
            </div>
          </ul>
        </el-col>
        <el-col :xl="10" :lg="11" :md="12" :sm="24" :xs="24">
          <ul>
            <el-form-item class="btn-group" label="账户类型：">
              <el-button size="small" type="text" v-if="active">对私</el-button>
              <el-button size="small" type="text" v-else>对公</el-button>
            </el-form-item>
            <div v-if="active">
              <el-form-item prop="card_name" label="银行账户名：">
                <el-input placeholder="持卡人姓名" v-model="Form.card_name"></el-input>
              </el-form-item>
              <el-form-item prop="bank_num" label="银行卡号：">
                <el-input placeholder="银行卡卡号" v-model="Form.bank_num" :maxlength="21"></el-input>
              </el-form-item>
              <el-form-item prop="bank_type" label="开户行名称：">
                <el-input placeholder="开户行名称" v-model="Form.bank_type"></el-input>
              </el-form-item>
              <el-form-item prop="bank_area" label="开户行地址：">
                <el-cascader v-model="Form.bank_area" change-on-select clearable :options="option" :props="options_key"></el-cascader>
              </el-form-item>
              <el-form-item prop="bank_branch_name" label="支行名称：">
                <el-input v-model="Form.bank_branch_name" placeholder="请输入开户行支行名称"></el-input>
              </el-form-item>
              <el-form-item prop="identify_card" label="身份证号码：">
                <el-input placeholder="身份证号码" v-model="Form.identify_card" :maxlength="18"></el-input>
              </el-form-item>
              <!-- <el-form-item prop="identify_area" label="身份证地址：">
                <el-input placeholder="身份证地址" v-model="Form.identify_area"></el-input>
              </el-form-item> -->
              <!-- <el-form-item prop="phone" label="手机号码：">
                <el-input placeholder="手机号码" v-model="Form.phone" :maxlength="11"></el-input>
              </el-form-item>
              <el-form-item prop="verify_code" label="验证码：">
                <el-input placeholder="验证码" style="width:100px;" v-model="Form.verify_code"></el-input>
                <span>
                  <el-button v-if="show" type="warning" size="small" @click="sendMes">获取验证码</el-button>
                  <el-button v-else type="warning" size="small">{{ this.count + 's后再次发送' }}</el-button>
                </span>
              </el-form-item> -->
            </div>
            <div v-else>
              <el-form-item prop="card_name" label="银行账户名：">
                <el-input placeholder="持卡人姓名" v-model="Form.card_name"></el-input>
              </el-form-item>
              <el-form-item prop="bank_num" label="银行卡号：">
                <el-input placeholder="银行卡卡号" v-model="Form.bank_num" :maxlength="19"></el-input>
              </el-form-item>
              <el-form-item prop="bankno" label="支行名称：">
                <el-select v-model="Form.bankno" filterable remote :remote-method="remoteMethod" :loading="remoteLoading" placehloder="请输入支行关键字">
                  <el-option v-for="item in sub_banks" :key="item.id" :value="item.id" :label="item.bank_name"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <!-- <div class="img">
              <label for="">个人信息照片：</label>
              <div>
                <el-form-item prop="positive" label-width="0">
                  
                    <img v-if="Form.positive" :src="Form.positive" class="avatar">
                    
                  <p>身份证正面</p>
                </el-form-item>
                <el-form-item prop="opposite" label-width="0">
                    <img v-if="Form.opposite" :src="Form.opposite" class="avatar">
                  <p>身份证反面</p>
                </el-form-item>
                <el-form-item prop="handtive" label-width="0">
                    <img v-if="Form.handtive" :src="Form.handtive" class="avatar">
                  <p>手持身份证</p>
                </el-form-item>
                <el-form-item prop="banktive" label-width="0">
                    <img v-if="Form.banktive" :src="Form.banktive" class="avatar">
                  <p>银行卡正面</p>
                </el-form-item>
              </div>
            </div>
            <div class="img">
              <label for="">店铺信息：</label><span class="tip">（如营业执照为三证合一，可不上传组织机构证）</span>
              <div>
                <el-form-item prop="shop" label-width="0">
                    <img v-if="Form.shop" :src="Form.shop" class="avatar">
                  <p>门头照片</p>
                </el-form-item>
                <el-form-item v-if="active1 !== 0" label-width="0">
                    <img v-if="Form.certificate" :src="Form.certificate" class="avatar">
                  <p>组织机构代码证（选填）</p>
                </el-form-item>
                <el-form-item v-if="active1 !== 0" prop="permit" label-width="0">
                    <img v-if="Form.permit" :src="Form.permit" class="avatar">
                  <p>开户许可证（选填）</p>
                </el-form-item>
                <el-form-item v-if="active1 !== 0" prop="license" label-width="0">
                    <img v-if="Form.license" :src="Form.license" class="avatar">
                  <p>营业执照</p>
                </el-form-item>
              </div>
            </div> -->
          </ul>
        </el-col>
      </el-form>
      <el-button type="primary" class="mr20 fr mb20" @click="handleWsItemSubmit">确认配置</el-button>
  </div>
</template>

<script>
  import { settleSearchInit, smsCodeValidate, remoteMethodQuery, handleWsItemInit, wsInfoSubmit, handleItemInit } from '@/api/shop'
  import { validatePhone, validateIdentity, validateBankNumber } from '@/utils/validate'

  export default {
    name: 'wsInfo',
    data() {
      const validaUndefined = (relus, value, callback) => {
        if (value === '' || value === undefined || value === null) {
          callback(new Error('不能为空哟~'))
        } else {
          callback()
        }
      }
      const validaPhone = (relus, value, callback) => {
        if (!validatePhone(value)) {
          callback(new Error('手机号码格式错误哟~'))
        } else {
          callback()
        }
      }
      const validateIdentityCard = (relus, value, callback) => {
        if (!validateIdentity(value)) {
          callback(new Error('身份证号码格式错误哟~'))
        } else {
          callback()
        }
      }
      const validateBankCardNumber = (relus, value, callback) => {
        if (!validateBankNumber(value)) {
          callback(new Error('银行卡号输入有误哟~'))
        } else {
          callback()
        }
      }
      return {
        show: true,
        count: '',
        timer: null,
        active: true,
        access: null, // 权限
        option: [],
        wsCategory: [],
        active1: 0,
        sub_banks: [],
        options_key: {
          value: 'city_code',
          label: 'alias',
          children: 'city'
        },
        loading: true,
        remoteLoading: false,
        Form: {
          commer_type: 0,
          commer_name: '',
          commer_address: [],
          real_address: '',
          contact_name: '',
          contact_tel: '',
          serverPhone: '',
          bank_branch_name: '',
          alias: '',
          email: '',
          lead_name: '',
          lead_identity_card: '',
          lead_phone: '',
          business_license: '',
          ali_nickname: '',
          ali_account: '',
          credit: '',
          ws_bank_config: 1,
          ws_wx_rate: '',
          ws_ali_rate: '',
          pay_id: '',
          recommend: '',
          account_type: 0,
          bank_num: '',
          card_name: '',
          bank_type: '',
          bank_area: [],
          identify_card: '',
          identify_area: '',
          phone: '',
          commer_mcc: '',
          verify_code: '',
          bankno: '',
          positive: '',
          opposite: '',
          handtive: '',
          banktive: '',
          shop: '',
          certificate: '',
          permit: '',
          license: ''
        },
        // item: {
        //   url: process.env.BASE_API + '/merchant/uploadCommer'
        // },
        props: {
          value: 'city_code',
          label: 'alias',
          children: 'city'
        },
        rules: {
          commer_type: [{ required: true, trigger: 'blur', validator: validaUndefined }],
          commer_name: [{ required: true, trigger: 'blur', message: '必须输入哟~' }],
          commer_address: [{ required: true, trigger: 'change', message: '必须选择哟~' }],
          contact_name: [{ required: true, trigger: 'blur', validator: validaUndefined }],
          contact_tel: [{ required: true, trigger: 'blur', type: 'number', validator: validaPhone }],
          serverPhone: [{ required: true, message: '格式不对哟~', trigger: 'blur' }],
          email: [{ required: true, trigger: 'blur', type: 'email', message: '邮箱设置有误哟~' }],
          lead_name: [{ required: true, trigger: 'blur', validator: validaUndefined }],
          lead_identity_card: [{ required: true, trigger: 'blur', validator: validateIdentityCard }],
          lead_phone: [{ required: true, trigger: 'blur', validator: validaPhone }],
          commer_mcc: [{ required: true, trigger: 'change', message: '必须选择哟~' }],
          business_license: [{ required: true, trigger: 'blur', validator: validaUndefined }],
          ali_nickname: [{ required: true, trigger: 'blur', validator: validaUndefined }],
          ali_account: [{ required: true, trigger: 'blur', validator: validaUndefined }],
          credit: [{ required: true, trigger: 'blur', validator: validaUndefined }],
          real_address: [{ required: true, trigger: 'blur', validator: validaUndefined }],
          ws_bank_config: [{ required: true, trigger: 'blur', validator: validaUndefined }],
          ws_wx_rate: [{ required: true, trigger: 'blur', type: 'number', message: '输入设置有误哟' }],
          ws_ali_rate: [{ required: true, trigger: 'blur', type: 'number', message: '输入设置有误哟' }],
          account_type: [{ required: true, trigger: 'blur', validator: validaUndefined }],
          bank_num: [{ required: true, trigger: 'blur', validator: validateBankCardNumber }],
          card_name: [{ required: true, trigger: 'blur', validator: validaUndefined }],
          bank_branch_name: [{ required: true, trigger: 'blur', validator: validaUndefined }],
          bank_type: [{ required: true, trigger: 'blur', validator: validaUndefined }],
          bank_area: [{ required: true, trigger: 'blur', validator: validaUndefined }],
          identify_card: [{ required: true, trigger: 'blur', validator: validateIdentityCard }],
          identify_area: [{ required: true, trigger: 'blur', validator: validaUndefined }],
          phone: [{ required: true, trigger: 'blur', validator: validaPhone }],
          verify_code: [{ required: true, trigger: 'blur', validator: validaUndefined }],
          bankno: [{ required: true, trigger: 'blur', validator: validaUndefined }],
          alias: [{ required: true, trigger: 'blur', validator: validaUndefined }],
          positive: [{ required: true, trigger: 'change', message: '图片必须上传哟~' }],
          opposite: [{ required: true, trigger: 'change', message: '图片必须上传哟~' }],
          handtive: [{ required: true, trigger: 'change', message: '图片必须上传哟~' }],
          banktive: [{ required: true, trigger: 'change', message: '图片必须上传哟~' }],
          shop: [{ required: true, trigger: 'change', message: '图片必须上传哟~' }],
          certificate: [{ required: true, trigger: 'change', message: '图片必须上传哟~' }],
          // permit: [{ required: true, trigger: 'change', message: '图片必须上传哟~' }],
          license: [{ required: true, trigger: 'change', message: '图片必须上传哟~' }]
        },
        date: {
          AlipayOnlineSource: [],
          AlipaySource: '',
          CertType: '',
          DealType: '',
          DeniedPayToolList: '',
          CertPhotoA: '',
          CertPhotoB: '',
          LicensePhoto: '',
          OtherPhoto: '',
          PrincipalCertType: '',
          ShopPhoto: '',
          MerchantId: '',
          PayChannelList: '',
          SettleMode: '',
          Smid: '',
          SupportPrepayment: '',
          SupportStage: '',
          TradeTypeList: '',
          Merchant_Type: '',
          WechatChannelList: null,
          ChannelType01: '',
          FeeType01: '',
          ChannelType02: '',
          FeeType02: ''
        }
      }
    },
    methods: {
      init() {
        handleItemInit().then(response => {
          this.option = response.data.result
        })
        handleWsItemInit().then(response => {
          this.wsCategory = response.data.result
        })
        settleSearchInit(this.$route.query.merchant_id).then(response => {
          if (response.data.errorCode === 0) {
            response.data.result.BankCardParam.AccountType === '01' ? this.active = true : this.active = false
            this.Form.account_type = response.data.result.BankCardParam.AccountType
            this.Form.bank_num = response.data.result.BankCardParam.BankCardNo
            this.Form.card_name = response.data.result.BankCardParam.BankCertName
            this.Form.bank_type = response.data.result.BankCardParam.BankCode
            this.Form.bank_branch_name = response.data.result.BankCardParam.BranchName
            this.Form.identify_card = response.data.result.BankCardParam.CertNo
            this.Form.bank_area = response.data.result.BankCardParam.bank_area
            this.Form.commer_type = response.data.result.MerchantType
            // this.Form.bank_type = response.data.result.MerchantType
            this.Form.commer_name = response.data.result.MerchantName
            this.Form.commer_mcc = response.data.result.Mcc
            this.Form.alias = response.data.result.MerchantDetail.Alias
            // this.Form.commer_address = response.data.result.MerchantDetai.Alias
            this.Form.real_address = response.data.result.BankCardParam.CardHolderAddress
            this.Form.contact_tel = response.data.result.MerchantDetail.ContactMobile
            response.data.result.FeeParamList.forEach(element => {
              if (element.ChannelType === '02') {
                this.Form.ws_wx_rate = element.FeeValue
                this.date.ChannelType02 = element.ChannelType
                this.date.FeeType02 = element.FeeType
              } else if (element.ChannelType === '01') {
                this.Form.ws_ali_rate = element.FeeValue
                this.date.ChannelType01 = element.ChannelType
                this.date.FeeType01 = element.FeeType
              }
            })
            this.Form.contact_name = response.data.result.MerchantDetail.ContactName
            this.Form.serverPhone = response.data.result.MerchantDetail.ServicePhoneNo
            this.Form.lead_phone = response.data.result.MerchantDetail.PrincipalMobile
            this.Form.lead_identity_card = response.data.result.MerchantDetail.PrincipalCertNo
            this.Form.lead_name = response.data.result.MerchantDetail.PrincipalPerson
            this.date.AlipayOnlineSource = response.data.result.AlipayOnlineSource
            this.date.AlipaySource = response.data.result.AlipaySource
            this.date.CertType = response.data.result.BankCardParam.CertType
            this.date.DealType = response.data.result.DealType
            this.date.DeniedPayToolList = response.data.result.DeniedPayToolList
            this.date.CertPhotoA = response.data.result.MerchantDetail.CertPhotoA
            this.date.CertPhotoB = response.data.result.MerchantDetail.CertPhotoB
            this.date.LicensePhoto = response.data.result.MerchantDetail.LicensePhoto
            this.date.OtherPhoto = response.data.result.MerchantDetail.OtherPhoto
            this.date.PrincipalCertType = response.data.result.MerchantDetail.PrincipalCertType
            this.date.ShopPhoto = response.data.result.MerchantDetail.ShopPhoto
            this.date.MerchantId = response.data.result.MerchantId
            this.date.PayChannelList = response.data.result.PayChannelList
            this.date.SettleMode = response.data.result.SettleMode
            this.date.Smid = response.data.result.Smid
            this.date.SupportPrepayment = response.data.result.SupportPrepayment
            this.date.SupportStage = response.data.result.SupportStage
            this.date.TradeTypeList = response.data.result.TradeTypeList
            this.date.Merchant_Type = response.data.result.Merchant_Type
            this.date.WechatChannelList = response.data.result.WechatChannelList
            this.loading = false
          }
        })
      },
      // filesPositive(file) {
      //   this.Form.positive = file.result
      // },
      // filesOpposite(file) {
      //   this.Form.opposite = file.result
      // },
      // filesHandtive(file) {
      //   this.Form.handtive = file.result
      // },
      // filesBanktive(file) {
      //   this.Form.banktive = file.result
      // },
      // imgsShop(file) {
      //   this.Form.shop = file.result
      // },
      // imgsCertificate(file) {
      //   this.Form.certificate = file.result
      // },
      // imgsPermit(file) {
      //   this.Form.permit = file.result
      // },
      // imgsLicense(file) {
      //   this.Form.license = file.result
      // },
      // beforeAvatarUpload(file) {
      //   const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      //   const isLt2M = file.size / 1024 / 1024 < 1

      //   if (!isJPG) {
      //     this.$message.error('上传图片只能是 JPG/PNG 格式!')
      //   }
      //   if (!isLt2M) {
      //     this.$message.error('上传图片大小不能超过 1MB！')
      //   }
      //   return isJPG && isLt2M
      // },
      remoteMethod(query) {
        if (query !== '') {
          this.remoteLoading = true
          remoteMethodQuery(query).then(response => {
            this.sub_banks = response.data.result
            this.remoteLoading = false
          })
        }
      },
      sendMes() {
        if (this.Form.phone !== '' || this.Form.phone !== undefined) {
          const TIME_COUNT = 60
          smsCodeValidate(this.Form.phone).then(response => {
            if (response.data.success) {
              this.$message.success(response.data.result)
              if (!this.timer) {
                this.count = TIME_COUNT
                this.show = false
                this.timer = setInterval(() => {
                  if (this.count > 0 && this.count <= TIME_COUNT) {
                    this.count--
                  } else {
                    this.show = true
                    clearInterval(this.timer)
                    this.timer = null
                  }
                }, 1000)
              }
            } else {
              this.$message.error(response.data.result)
            }
          })
        } else {
          this.$message.error('请填写手机号码')
        }
      },
      handleWsItemSubmit() {
        wsInfoSubmit(this.$route.query.merchant_id, this.Form, this.date).then(response => {
          if (response.data.errorCode === 0) {
            this.$message.success(response.data.errorMsg)
            this.$router.go(-1)
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
      }
    },
    created() {
      this.init()
    }
  }
</script>

<style lang="scss" scoped>
  .shopInfo{
    .img{
      .el-form-item{
        display: inline-block;
        margin-right: 10px;
        .tip{
          font-size: 12px;
        }
        p{
          font-size: 10px;
        }
      }
      .avatar{
        width: 100px;
        height: 100px;
      }
    }
  }
</style>
